/*
 * @Author: FengKongLi 
 * @Date: 2021-08-18 22:53:33 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-08-25 19:47:47
 */

<!-- 订单管理页面 -->
<template>
  <div>
    <!-- 导航标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="所有订单"></el-tab-pane>
      <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
      <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
      <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
      <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
      <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
      <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
    </el-tabs>
    <!-- 表单数据展示 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="订单编号"> </el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间"
        :formatter="fmtTableDateDay"
      >
      </el-table-column>
      <el-table-column prop="total" label="总价">
        <template slot-scope="scope">
          <span>￥</span
          ><span style="color: #e65d6e; font-size: 18px">{{
            scope.row.total
          }}</span>
          <span>元</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '待接单'" type="warning">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status === '待派单'" type="success">{{
            scope.row.status
          }}</el-tag>
          <el-tag
            v-else-if="
              scope.row.status === '待服务' || scope.row.status === '已完成'
            "
            type="info"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag v-else-if="scope.row.status === '待支付'" type="danger">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
      <el-table-column
        prop="employeeId"
        label="员工ID"
        v-if="activeName !== '待支付' && activeName !== '待派单'"
      >
        <template slot-scope="scope">
          {{ scope.row.status === "待派单" ? "--" : scope.row.employeeId }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="130">
        <template slot-scope="scope">
          <el-button @click="toDetail(scope.row.id)" type="text"
            >详情</el-button
          >
          <el-button
            v-show="scope.row.status === '待接单'"
            type="text"
            style="color: #e6a23c"
            @click="cancel_send_order(scope.row.id)"
            >取消派单</el-button
          >
          <el-button
            v-show="scope.row.status === '待派单'"
            type="text"
            @click="show_send_order(scope.row.id)"
            >派单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 派单---对话框 -->
    <el-dialog title="派单" :visible.sync="dialogVisble">
      <el-radio-group v-model="dispatchMan" size="medium">
        <el-radio
          v-for="item in employeeData"
          :key="item.id"
          class="radio-div"
          :label="item.id"
          border
          >{{ item.username + " "
          }}{{ item.realname === null ? "" : item.realname }}</el-radio
        >
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisble = false">取 消</el-button>
        <el-button type="primary" @click="confirmDispatch">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageQuery,
  cascadeRoleFindAll,
  sendOrder,
  cancelSendOrder,
} from "@/api/order";
import { fmtTableDateDay } from "@/filters/index";
export default {
  data() {
    return {
      // 设置当前激活的标签页
      activeName: "所有订单",
      // 时间格式
      fmtTableDateDay,
      // 表单数据
      tableData: {},
      // 分页查询参数
      params: {
        page: 1,
        pageSize: 10,
      },
      //加载
      loading: false,
      // 总条数
      total: 0,
      // 员工数据
      employeeData: [],
      // 派单对话框显示与隐藏
      dialogVisble: false,
      // 派单给哪个员工
      dispatchMan: null,
      // 订单编号
      orderId: null,
    };
  },
  watch: {
    // 深度监听分页参数,当多少条/页发生变化时重新请求数据
    params: {
      handler() {
        this.getData();
      },
      deep: true,
    },
  },
  created() {
    this.getData();
  },
  methods: {
    // 标签页切换
    handleClick() {
      this.params.page = 1;
      this.params.status = this.activeName;
      if (this.activeName !== "所有订单") {
        //当当前激活页不是‘所有订单’时，给params添加当前状态
        this.params.status = this.activeName;
      } else {
        this.params.status = null;
      }
      this.getData();
      // this.activeName 订单状态,所有订单
    },
    // 获取所有数据
    async getData() {
      this.loading = true;
      let res = await pageQuery({ ...this.params });
      if (res.status !== 200) {
        return this.$message.error("获取数据失败");
      }
      /* console.log(res);
      console.log(res.data);
      console.log(res.data.list); */
      // 表单数据
      this.tableData = res.data.list;
      // 总条数
      this.total = res.data.total;
      this.loading = false;
    },
    //每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      this.params.page = val;
    },
    // 点击详情根据订单id跳到详情页
    toDetail(id) {
      // .$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象
      this.$router.push({
        path: "/order/Detail",
        // 带参数，订单编号
        query: { orderID: id },
      });
    },
    // 查询所有员工id
    async getEmployeeID() {
      let res = await cascadeRoleFindAll();
      if (res.status !== 200) {
        return this.$message.error("获取员工数据失败");
      }
      this.employeeData = res.data.filter((item) => {
        if (item.roles[0].id === 1) return item;
      });
    },
    // 点击'取消派单'按钮
    async cancel_send_order(id) {
      let res = await cancelSendOrder({ orderId: id });
      if (res.status !== 200) return this.$message.error("取消失败");
      this.$message.success("取消成功");
      this.getData();
    },
    // 点击派单按钮，弹出派单对话框
    show_send_order(id) {
      this.orderId = id;
      this.getEmployeeID();
      this.dialogVisble = true;
    },

    // 点击 派单对话框的 确定按钮，确认派单
    async confirmDispatch() {
      let res = await sendOrder({
        waiterId: this.dispatchMan,
        orderId: this.orderId,
      });
      if (res.status !== 200) return this.$$message.error("派单失败");
      this.$message.success("派单成功");
      this.dialogVisble = false;
      this.getData();
    },
  },
};
</script>

<style scoped>
.radio-div {
  margin: 10px;
  display: inline-block;
}
</style>
